<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>724便利店管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/statics/layui/css/layui.css" media="all">
</head>
<body>
<div>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
        </div>
    </script>
    <p><span style="color: #fff21b;"> ${loginUser.realName }</span> , 欢迎光临！</p>
    <a href="${pageContext.request.contextPath}/supplier/tosupplierList">供货商</a>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">真实姓名：</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="realName" id="realName2" autocomplete="off">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">角色：</label>
                <div class="layui-input-block">
                    <select name="roleId" lay-filter="aihao">
                        <option value=""></option>
                        <option value="1">管理系统员</option>
                        <option value="2">店长</option>
                        <option value="3">店员</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
                </div>
            </div>
        </div>

    </form>
</div>

<table id="demo" lay-filter="test" ></table>

<div>
    账号：<span id="account"></span><br>
    密码：<span id="password"></span><br>
    真实姓名：<span id="realName"></span><br>
    角色id：<span id="roleId"></span><br>
    电话：<span id="phone"></span><br>
    地址：<span id="address"></span><br>
    性别：<span id="sex"></span><br>
    出生日期：<span id="birthday"><fmt:formatDate value="${sysUser.birthday}" pattern="yyyy-MM-dd"/></span><br>
    证件照:<img id="img" width="100px" height="120px" src=""/>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a>
    <a class="layui-btn  layui-btn-normal layui-btn-xs" lay-event="view">查看</a>
    <a class="layui-btn  layui-btn-normal layui-btn-xs" lay-event="view2">查看2</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="${pageContext.request.contextPath }/statics/layui/layui.js"  charset="utf-8"></script>
<script>

    layui.use(['table','form'], function(){
        var table = layui.table;
        var form = layui.form;
        var  $ = layui.$;
        // 工具栏事件
        table.on('toolbar(test)', function(obj){
            switch(obj.event){
                case 'add':
                    window.open('toadd')
                    break;
            };
        });

        //第一个实例
        var tableIns = table.render({
            elem: '#demo'
            ,height: 530
            ,toolbar: '#toolbarDemo'
            ,url: '${pageContext.request.contextPath }/user/list' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field:'id', width:135, title: '编号'}
                ,{field:'account', width:135, title: '账号'}
                ,{field:'realName', width:135, title: '真实姓名'}
                ,{field:'roleId', width:135, title: '角色ID'}
                ,{field:'sex', width:135, title: '性别'}
                ,{field:'age', width:135, title: '年龄'}
                ,{field:'phone', width:135, title: '电话'}
                ,{field:'birthday', width:135, title: '生日'}
                ,{field:'idpicpath', width:135, title: '证件照'}
                ,{fixed: 'right', title:'操作', width: 240, minWidth: 150, toolbar: '#barDemo'}
            ]]
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            console.log(data.field)
            //这里以搜索为例
            tableIns.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    realName: data.field.realName
                    ,roleId: data.field.roleId
                    //…
                }
                ,page: {
                    curr: 2 //重新从第 1 页开始
                }
            });
            return false;
        });

        //触发单元格工具事件
        table.on('tool(test)', function(obj){ // 双击 toolDouble
            var data = obj.data;
            console.log(data)
            console.log(data.account)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.get('delete/'+data.id,function (data) {
                        console.log(data)
                        //关闭提示
                        layer.close(index);
                        console.log(data)
                        if (1===parseInt(data)){
                            location.reload();
                        } else {
                            alert('删除失败')

                        }
                    })
                });
            } else if(obj.event === 'edit'){
                window.open('toupdate/'+data.id)
                // layer.open({
                //     title: '编辑',
                //     type: 1,
                //     area: ['80%','80%'],
                //     content:$("#popUpdateTest")
                //
                // });
            } else if (obj.event == "view") {
                window.open('view/'+data.id)

                <%--layer.open({--%>
                <%--            title:'查看',--%>
                <%--            type:1,--%>
                <%--            area:['80%','80%'],--%>
                <%--            content:`${pageContext.request.contextPath}/user/toview`,--%>
                <%--            success:function (layero){--%>
                <%--                var div = layero.find('iframe').contents().find('#select');--%>
                <%--                // div.find("#id").test(data.id);--%>
                <%--                div.find("#account").text(data.account);--%>
                <%--                div.find("#password").text(data.password);--%>
                <%--                div.find("#realName").text(data.realName);--%>
                <%--                div.find("#roleId").text(data.roleId);--%>
                <%--                div.find("#phone").text(data.phone);--%>
                <%--                div.find("#sex").text(data.sex);--%>
                <%--                div.find("#address").text(data.address);--%>
                <%--                div.find("#birthday").text(data.birthday);--%>
                <%--                div.find("#idpicpath").text(data.idpicpath);--%>
                <%--            }--%>
                <%--        })--%>

            }else if (obj.event == "view2") {
                $.get("${pageContext.request.contextPath}/user/view2/"+data.id,function (data){
                    if (data != null) {
                        $("#account").html(data.account)
                        $("#password").html(data.password)
                        $("#realName").html(data.realName)
                        $("#roleId").html(data.roleId)
                        $("#phone").html(data.phone)
                        $("#address").html(data.address)
                        if (data.sex == 2) {
                            $("#sex").html("女")
                        }else {
                            $("#sex").html("男")
                        }
                        $("#birthday").html(data.birthday)
                        $('img')[0].src="/mvcDome2_war_exploded/statics/upload/"+data.idpicpath;
                    }

                })
            }

        });

    });
</script>
</body>
</html>